<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">

<head>
    <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题标签 -->
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <!--                    <input name="username" type="text" id="username" onblur="checkUsername()">-->
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>
<script>

    //1. 验证 用户名是否符合规则：长度 6~12,单词字符组成
    //1.1拿到用户名的id，添加失去焦点事件。
    let username = document.getElementById("username").onblur = function () {
        //1.2拿到输入框内的值
        let usernameVle = document.getElementById("username").value;
        //1.3定义正则表达规则
        let reg = /^\w{6,12}$/
        //1.4判断输入框的值是否符合定义的正则规定
        if (reg.test(usernameVle)) {
            //1.5符合,则隐藏文本内容
            document.getElementById("username_err").style.display = "none";
            return true;
        } else {
            //1.6不符合，显示文本内容
            document.getElementById("username_err").style.display = "block";
            return false;
        }

    }

    //2. 验证 密码是否符合规则:长度 6~12任意字符
    //2.1拿到密码框的id，并添加失去焦点事件
    let password = document.getElementById("password").onblur = function () {
        //2.2拿到密码框的内容
        let passwordVle = document.getElementById("password").value;
        //2.3定义正则表达规则
        let reg = /^.{6,12}$/
        //2.4判断密码框的值是否符合正则
        if (reg.test(passwordVle)) {
            //2.5符合则隐藏
            document.getElementById("password_err").style.display = "none";
            return true;
        } else {
            //2.6不符合则显示
            document.getElementById("password_err").style.display = "block";
            return false;
        }
    }


    //3. 验证 手机号是否符合规则：长度 11，数字组成，第一位是1
    //3.1拿到手机号的id，并添加失去焦点事件
    let tel = document.getElementById("tel").onblur = function () {
        //3.2拿到手机框的内容
        let telVle = document.getElementById("tel").value;
        //3.3定义正则表达规则
        let reg = /^[1][3-9]\d{9}$/
        //3.4判断手机框的值是否符合正则
        if (reg.test(telVle)) {
            //3.5符合则隐藏
            document.getElementById("tel_err").style.display = "none";
            return true;
        } else {
            //3.6不符合则显示
            document.getElementById("tel_err").style.display = "block";
            return false;
        }
    }
    //4. 表单是否可以提交
    //4.1拿到注册按钮的id,并添加提交表单事件
    document.getElementById("reg-form").onsubmit = function () {
        //4.2为前面的用户名、密码、手机号添加一个名称,当三个值都为true时，则返回值为true，所以添加成功
        return username() && password() && tel();
    }

</script>
</body>
</html>